<!DOCTYPE>
<html lang="en"><head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
	<title>border实现</title>
	<style type="text/css">
        html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,input,q,b,dl,dt,dd,ol,ul,li,form,label,canvas {
            margin: 0;
        	padding: 0;
        }
        
        body{
        	background: #fff;
        	font-family: 'Microsoft YaHei', Arial, sans-serif,'Helvetica Neue', Helvetica;
        	color: #666;
        }
        
        li{
        	list-style: none;
        }
        
        a{
        	text-decoration: none;
        }
        .wrapper{
        	width: 100%;
        	padding-top: 60px;
        	padding-bottom: 15px;
        }
        .wrapper .dwrapper{
            width: 100%;
        	padding-top: 2.1875rem;
        	display: none;
        }
        .wrapper .dwrapper .abtn{
        	display: inline-block;
        	color: #666;
        	text-decoration: none;
        }
        .wrapper .dwrapper .rbtn{margin-left: 20px;}
        
        .abtn:hover{
        	text-decoration: none;
        }	
        .abtn:active{
        	box-shadow:none;
        }
        .wrapper .dwrapper .dbg{
        	line-height: 60px;
        	background-color: #fff9f2;
        	width: 60px;
        	height: 60px;
        }
        .wrapper .dwrapper .dbg:after{
        	position: relative;
            top: -100%;
            width: 200%;
            height: 200%;
            content: '';
            display: block;
            left: 0;
            z-index: 2;
            border: 1px solid #ff8903;
            border-radius: 10px;
            -webkit-transform: scale(0.5);
            -webkit-transform-origin: 0 0;
        }
        .wrapper .dwrapper .abtn:hover .dbg,.wrapper .dwrapper .abtn:active .dbg{
        	background-color: #f7f7f7;
        }
        .wrapper .dwrapper .abtn:hover .dbg:after,.wrapper .dwrapper .abtn:active .dbg:after{
        	position: relative;
            top: -100%;
            width: 200%;
            height: 200%;
            content: '';
            display: block;
            left: 0;
            z-index: 2;
            border: 1px solid #ccc;
        	border-radius: 10px;
            -webkit-transform: scale(0.5);
            -webkit-transform-origin: 0 0;
        }
        .wrapper .dwrapper .dbg span.icon{
        	width: 60px;
        	height: 60px;
        	display: block;
        	background-repeat: no-repeat;
        	background-position: center;
        	background-size: 50%;
        	margin:0;
        }
        .wrapper .dwrapper .dbg span.iphone{
        	background-color: #333;
        }
        .wrapper .dwrapper .dbg span.android{
        	background-color: #999;
        }
        .wrapper .dwrapper .abtn:hover span.iphone,
        .wrapper .dwrapper .abtn:active .dbg span.iphone{
        	background-image: url(imgs/iph.png);
        }
        .wrapper .dwrapper .abtn:hover span.android,.wrapper .dwrapper .abtn:active .dbg span.android{
        	background-image: url(imgs/and.png);
        }
        .wrapper .dwrapper .abtn span{
        	display: inline-block;
        	margin-top:0.375rem;
        	font-family: 'thin';
        	color:#ff8903;
        }
        .wrapper .dwrapper .abtn:hover span,.wrapper .dwrapper .abtn:active span{
        	color:#666;
        }
    </style>
	
</head>
<body class="">
	<div class="wrapper">
		
		<div class="dwrapper">
			<a class="abtn" >
				<div class="dbg">
					<span class="icon iphone"></span>
				</div>
				<span>IOS</span>
			</a>
			<a class="abtn rbtn">
				<div class="dbg">
					<span class="icon android"></span>
				</div>
				<span>Android</span>
			</a>
		</div>

		
    </div>
	
</body>
</html>